<template>
  <div class="app-container">
    <el-row >
      <el-col>
        <el-card class="box-card" :body-style="{ padding: '10px 20px'}">
          <div slot="header" class="clearfix">
            <el-row>
              <span style="font-weight: 700;font-size: 15px;">服务列表</span>
              <el-tooltip class="item" content="刷新" effect="light" placement="top">
                <i class="el-icon-refresh" size="mini" style="float: right; padding: 3px 0" @click="getList()" />
              </el-tooltip>
            </el-row>
          </div>
          <div class="head-container">
            <el-row>
              <div class="head-input">
<!--                <el-input v-model="serviceName" clearable placeholder="请输入服务名称" prefix-icon="el-icon-search" size="small" style="margin-bottom: 5px" />-->
                <el-select v-model="serviceId" placeholder="请选择服务" style="margin-bottom: 5px; width: 25%; margin-right: 10%;">
                  <el-option
                    v-for="item in list"
                    :key="item.id"
                    :label="item.description"
                    :value="item.id">
                  </el-option>
                </el-select>
              </div>
            </el-row>
          </div>
          <el-col v-if="this.serviceId" :span="24" :xs="24" style="padding: 20px 0px;">
            <el-tabs v-model="activeName" type="border-card">
              <el-tab-pane label="属性列表" name="first">
                <!--属性列表-->
                <div>
                  <Properties :service-id="this.serviceId"/>
                </div>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getList } from '@/api/cms/winglinks/product/services'
import Properties from './properties'
export default {
  name: 'Service',
  components: { Properties },
  props: {
    'productIdentification': {
      type: String,
      required: true
    }
  },
  data() {
    return {
      // tab切换
      activeName: 'first',
      loading: false,
      list: [],
      serviceOptions: [],
      serviceName: null,
      serviceId: null,
      listLoading: false,
      listQuery: {
        productIdentification: null,
        serviceName: null
      },
      // 顶部操作栏配置
      filterData: {
        name: {
          key: 'serviceName',
          type: 'input',
          title: '服务名称',
          placeholder: '请输入服务名称'
        }
      },
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  watch: {
    productIdentification(newval, oldval) {
      if (newval !== oldval) {
        this.listQuery.productIdentification = newval
        this.getList()
      }
    },
    // 根据服务名称服务列表
    serviceName(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    if (this.productIdentification) { this.listQuery.productIdentification = this.productIdentification }
    this.getList()
  },
  methods: {
    // 查询列表信息
    getList() {
      this.loading = true
      this.list = []
      getList(this.listQuery).then(res => {
        let index = 0
        res.data.forEach(item => {
          this.list = res.data
          if (index === 0) { this.serviceId = item.id }
          index++
        })
      })
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.serviceId = data.id
    },
    // 多选框选中数据
    handleSelectionChange(target, Selected) {
      this.ids = Selected.checkedNodes.map(item => item.id)
      this.single = Selected.checkedNodes.length !== 1
      this.multiple = !Selected.checkedNodes.length
    }
  }
}
</script>

<style lang="scss" scoped>
  .box-card{
    width: 100%;
  }
</style>
